<!--
 * @Version: 1.0
 * @Date: 2021-04-07 14:33:42
 * @LastEditTime: 2021-11-26 17:07:02
 * @Description:
-->
<template>
  <div>
    <el-dialog :center="true" :title="title" :visible.sync="formVisibleDown" width="950px" :before-close="() => {$emit('update:formVisibleDown', false)}" @open="openDialog">
      <div v-loading="loadingTable">
        <div v-if="title!=='手工发货'? true : false" class="header_title_box">
          <h2 style="margin-right:50px">
            发货单信息
          </h2>
        </div>
        <el-form v-if="title!=='手工发货'? true : false" :model="dataObj" inline label-width="170px" label-position="right" class="filter-selection">
          <el-form-item label="发货单号：">
            <span class="width200">{{ dataObj.invoice_no }}</span>
          </el-form-item>
          <el-form-item label="订单编号：">
            <span class="width200">{{ dataObj.order_no }}</span>
          </el-form-item>
          <el-form-item label="平台订单编号：">
            <span class="width200">{{ dataObj.platform_no }}</span>
          </el-form-item>
          <el-form-item label="平台订单编号2：">
            <span class="width200">{{ dataObj.platform_no_ext }}</span>
          </el-form-item>
          <el-form-item label="发货实体仓库：">
            <span class="width200">{{ dataObj.en_name }}</span>
          </el-form-item>
          <el-form-item label="发货虚拟仓库：">
            <span class="width200">{{ dataObj.$vi_name }}</span>
          </el-form-item>
          <el-form-item label="订单类型：">
            <span class="width200">{{ dataObj.order_delivery_type===1 ? '整单发货': '拆分发货' }}</span>
          </el-form-item>
          <el-form-item label="发货单状态：">
            <span class="width200">{{ orderStatus[dataObj.delivery_state] }}</span>
          </el-form-item>
          <el-form-item label="物流单号：">
            <span class="width200">{{ dataObj.shipping_code }}</span>
          </el-form-item>
          <el-form-item label="创建人：">
            <span class="width200">{{ dataObj.creator_name ? dataObj.creator_name : '-' }}</span>
          </el-form-item>
          <el-form-item label="创建时间：">
            <span class="width200">{{ dataObj.created_at }}</span>
          </el-form-item>
          <el-form-item label="审核人：">
            <span class="width200">{{ dataObj.up_name ? dataObj.up_name : '-' }}</span>
          </el-form-item>
          <el-form-item label="美制长：">
            <span class="width200">{{ dataObj.length_AS_total }}</span>
          </el-form-item>
          <el-form-item label="美制宽：">
            <span class="width200">{{ dataObj.width_AS_total }}</span>
          </el-form-item>
          <el-form-item label="美制高：">
            <span class="width200">{{ dataObj.height_AS_total }}</span>
          </el-form-item>
          <el-form-item label="美制毛重：">
            <span class="width200">{{ dataObj.weight_AS_total }}</span>
          </el-form-item>
          <el-form-item label="仓储费单个商品：">
            <div class="width200">
              <app-price :price="dataObj.warehouse_price" />
            </div>
          </el-form-item>
          <el-form-item v-if="dataObj.platform_id !== 3 && dataObj.platform_id !== 4" label="物流基础费：">
            <div class="width200">
              <app-price :price="dataObj.freight_weight_price" />
            </div>
          </el-form-item>
          <el-form-item label="订单操作费/单个商品：">
            <div class="width200">
              <app-price :price="dataObj.order_price" />
            </div>
          </el-form-item>
          <el-form-item v-if="dataObj.platform_id !== 3 && dataObj.platform_id !== 4" label="物流附加费：">
            <div class="width200">
              <app-price :price="dataObj.freight_additional_price" />
            </div>
          </el-form-item>
          <el-form-item v-if="dataObj.platform_id !== 3 && dataObj.platform_id !== 4" label="邮编附加费：">
            <div class="width200">
              <app-price :price="dataObj.postcode_fee" />
            </div>
          </el-form-item>
          <!-- hedge_fee -->
          <el-form-item v-if="dataObj.platform_id !== 3 && dataObj.platform_id !== 4" label="保费/单个商品：">
            <div class="width200">
              <app-price :price="dataObj.hedge_fee" />
            </div>
          </el-form-item>
        </el-form>
        <!-- 商品信息 -->
        <div v-if="dataObj.product && dataObj.logistics_status===2 && dataObj.status===0" style="margin-bottom:50px">
          <div v-if="title==='手工发货'?false:true">
            <el-table :data="dataObj.product" border>
              <el-table-column align="center" label="缩略图" prop="url">
                <template>
                  <el-image style="width: 50px; height: 50px" fit="contain" :src="dataObj.goods_pic">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline" />
                    </div>
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column align="center" label="系统sku" prop="goods_code" />
              <el-table-column align="center" label="商品名称" prop="name" show-overflow-tooltip />
              <el-table-column align="center" label="包装方式" prop="packing_method">
                <template>
                  {{ dataObj.packing_method === 1 ? '普通商品' : '多箱包装' }}
                </template>
              </el-table-column>
              <el-table-column v-if="dataObj.packing_method === 2" align="center" label="多箱名称" prop="goods_group_name">
                <template>
                  {{ dataObj.goods_group_name }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="属性" prop="variation" />
              <el-table-column align="center" label="单价" prop="transaction_price_value" />
              <el-table-column align="center" label="币别" prop="transaction_price_currencyid" />
              <el-table-column align="center" label="数量" prop="quantity_purchased">
                <template>
                  {{ dataObj.number }}
                </template>
              </el-table-column>
              <el-table-column align="center" label="金额(含税)" prop="transaction_price_value_all">
                <template slot-scope="scope">
                  <app-price :price="scope.row.transaction_price_value_all" />
                </template>
              </el-table-column>
              <el-table-column align="center" label="税费" prop="tax_amount_value">
                <template slot-scope="scope">
                  <app-price :price="scope.row.tax_amount_value" />
                </template>
              </el-table-column>
              <!-- <el-table-column align="center" label="币别" prop="tax_amount_currencyid">
                <template slot-scope="scope">
                  {{ scope.row.tax_amount_currencyid ? scope.row.tax_amount_currencyid : 'USD' }}
                </template>
              </el-table-column> -->
              <el-table-column align="center" label="发货仓库" prop="warehouse_name" />
              <!-- <el-table-column align="center" label="库存量" prop="quantity_purchased" /> -->
            </el-table>
          </div>
        </div>
        <!-- 发货订单关联商品信息 -->
        <div v-if="dataObj.product_deliver && (dataObj.logistics_status === 1 || (dataObj.logistics_status===2 && dataObj.status===1))">
          <div v-if="title==='手工发货'?false:true">
            <el-table :data="dataObj.product_deliver" border>
              <el-table-column key="1" align="center" label="缩略图" prop="url">
                <template>
                  <el-image style="width: 50px; height: 50px" fit="contain" :src="dataObj.goods_pic">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline" />
                    </div>
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column key="2" align="center" label="系统sku" prop="goods_code" />
              <el-table-column key="3" align="center" label="商品名称" prop="goods_name_en" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>中文名称：{{ scope.row.goods_name }}</span>
                  <el-divider />
                  <span>英文名称：{{ scope.row.goods_name_en }}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="dataObj.packing_method===1?false:true" key="4" align="center" label="组名称" prop="goods_group_name" show-overflow-tooltip />
              <el-table-column key="5" align="center" label="包装方式" prop="packing_method">
                <template slot-scope="scope">
                  <span>{{ scope.row.type===2? '配件': (dataObj.packing_method === 2 ? '多箱包装' : '普通商品') }}</span>
                </template>
              </el-table-column>
              <el-table-column key="6" align="center" label="单价" prop="transaction_price_value" />
              <el-table-column key="7" align="center" label="币别" prop="transaction_price_currencyid" />
              <el-table-column key="8" align="center" label="数量" prop="number" />
              <el-table-column key="9" align="center" label="金额(含税2)" prop="transaction_price_all">
                <template slot-scope="scope">
                  <app-price :price="scope.row.transaction_price_all" />
                </template>
              </el-table-column>
              <el-table-column key="10" align="center" label="税费" prop="tax_amount_value">
                <template slot-scope="scope">
                  <app-price :price="scope.row.tax_amount_value" />
                </template>
              </el-table-column>
              <el-table-column key="11" align="center" label="币别" prop="tax_amount_currencyid">
                <template slot-scope="scope">
                  {{ scope.row.tax_amount_currencyid ? scope.row.tax_amount_currencyid : 'USD' }}
                </template>
              </el-table-column>
              <el-table-column key="12" align="center" label="发货仓库" prop="warehouse_name">
                <template>
                  {{ dataObj.$vi_name }}
                </template>
              </el-table-column>
              <el-table-column key="13" align="center" label="批次" prop="batch_no" width="150" />
            </el-table>
          </div>
        </div>
        <!-- 收货人信息 -->
        <div v-if="dataObj.user_addres && title!=='手工发货'">
          <div style="margin-top:20px" class="header_title_box">
            <h2 style="margin-right:50px">
              收货人信息
            </h2>
          </div>
          <el-form v-if="title!=='手工发货'" :model="dataObj.user_addres" inline label-width="150px">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="买家姓名：" style="display: inline-flex;">
                  <span>{{ dataObj.user_addres.address_name }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="买家邮箱：" style="display: inline-flex;">
                  <span>{{ dataObj.user_addres.address_email }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="电话号码：">
                  <span>{{ dataObj.user_addres.address_phone }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="邮编：">
                  <span>{{ dataObj.user_addres.address_postalcode }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="国家：">
                  <span>{{ dataObj.user_addres.address_country_name }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="州/省：">
                  <span>{{ dataObj.user_addres.address_stateorprovince }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="城市：">
                  <span>{{ dataObj.user_addres.address_cityname }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item style="display: inline-flex;" label="街道1：">
                  <span>{{ dataObj.user_addres.address_street1 ? dataObj.user_addres.address_street1 : '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="街道2：">
                  <span>{{ dataObj.user_addres.address_street2 ? dataObj.user_addres.address_street2 : '-' }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="街道3：">
                  <span>{{ dataObj.user_addres.address_street3 ? dataObj.user_addres.address_street3 : '-' }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div v-if="dataObj.delivery_state > 2 ? true : false">
          <div v-if="title!=='手工发货'? true : false" class="header_title_box">
            <h2 style="margin-right:50px">
              物流信息
            </h2>
          </div>
          <div v-if="!logisticsLoading && title!=='手工发货'">
            <div v-if="(dataObj.shipping_name)==='UPS'">
              <DeliveryUps :code="dataObj.shipping_code" :data-obj="dataObj" />
            </div>
            <div v-else>
              <DeliveryUsps :code="dataObj.shipping_code" :data-obj="dataObj" />
            </div>

          </div>
        </div>
      </div>
      <!-- 选择仓库 -->
      <div v-if="title==='手工发货'?true:false">
        <div class="header_title_box">
          <h2 style="margin-right:50px">
            仓库选择
          </h2>
        </div>
        <el-form ref="ruleForm" :model="formData" label-width="150px">
          <el-form-item label="选择仓库" prop="warehouse" :rules="[{ required: true, message: '请选择仓库'}]">
            <el-select v-model="formData.warehouse" placeholder="请选择">
              <el-option v-for="item in warehouseStockList" :key="item.id" :label="item.entity_warehouse" :value="item.dataObj" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div style="text-align: center; margin-top:50px">
        <el-button v-if="title==='手工发货'?true:false" type="primary" :loading="isbtn" @click="submitForm('ruleForm')">保存</el-button>
        <el-button :type="title === '手工发货' ? 'default' : 'primary'" @click="handleCancelDown">{{ title==='手工发货' ? '取消' : '返回' }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import DeliveryUps from '@/components/DeliveryUps/index.vue'
import DeliveryUsps from '@/components/DeliveryUsps/index.vue'
import { warehouseStockList } from '@/utils/publicData'
import { accMul, accAdd } from '@/utils/index'
export default {
  name: 'DeliveryOrderInfo',
  components: { DeliveryUps, DeliveryUsps },
  props: {
    formVisibleDown: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formData: {
        warehouse: ''
      },
      warehouseStockList: [],
      loadingUps: false,
      rules: {
        status: [
          {
            required: true, message: '请选择审核意见', trigger: 'change'
          }
        ]
      },
      orderStatus: {
        1: '待发货',
        2: '待打印面单',
        3: '运输中',
        4: '配送中',
        5: '已收货'
      },
      formExamine: {
        status: '1',
        examine_reason: ''
      },
      isbtn: false,
      isShow: false,
      loadingTable: false,
      dataObj: {},
      deliveryUps: [],
      logisticsLoading: true
    }
  },
  methods: {
    openDialog() {
      this.loadingTable = true
      this.orderInfo()
      this.loadingUps = true
      console.log('>>>>>>>', this.title)
      if (this.title === '手工发货') {
        this.formData.warehouse = ''
        warehouseStockList(this.id).then((data) => {
          this.warehouseStockList = data.map((arr) => {
            arr.dataObj = JSON.stringify({
              'warehouse_id': arr.warehouse_id,
              'warehouse_fictitious_id': arr.warehouse_fictitious_id,
              'zone': arr.zone
            })
            return arr
          })
        })
      }
    },
    // 订单详情
    orderInfo() {
      const vm = this
      vm.logisticsLoading = true
      vm.$http.post(`/deliveryInfo?order_id=${vm.id}`, { type: 1 }).then((res) => {
        if (res.code === 10000) {
          vm.dataObj = res.data
          const dataObj = res.data
          if (vm.dataObj.shipping_code) {
            vm.logisticsLoading = false
          }
          vm.dataObj.shipping_name = dataObj.shipping_name.toLocaleUpperCase()
          vm.dataObj.product_deliver = res.data.product_deliver.map((arr) => {
            arr.transaction_price_value_all = accAdd(accMul(arr.transaction_price_value, arr.number), arr.tax_amount_value)
            // arr.variation = arr.variation ? arr.variation : '-'
            return arr
          })
          // （基础运费 * 数量） + （额外运费 * 数量）+ 偏远运费
          vm.dataObj.freight_weight_price_all = accAdd(accMul(accAdd(dataObj.freight_weight_price, dataObj.freight_additional_price), dataObj.number), dataObj.postcode_fee)
          vm.dataObj.product = res.data.product.map((arr) => {
            arr.transaction_price_value_all = accAdd(accMul(arr.transaction_price_value, arr.quantity_purchased), arr.tax_amount_value)
            return arr
          })
          this.loadingTable = false
          vm.logisticsLoading = false
        }
        this.loadingTable = false
      })
    },
    // 关闭
    handleCancelDown() {
      this.$emit('update:formVisibleDown', false)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = JSON.parse(this.formData.warehouse)
          this.$http.post(`/deliveryOrders/manualDelivery/${this.id}`, data).then(response => {
            if (response.code === 10000) {
              this.$message.success('发货成功')
              this.$emit('handleSearch')
              this.handleCancelDown()
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.width200 {
  width: 200px;
  display: block;
}
</style>
